<template>
  <div id="app">
    <div class="container">
      <category title = '游戏'>
        <template v-slot:default="slotProps">     
          <ul>
            <li v-for="(game,index) in slotProps.games" :key = 'index'>{{ game }}</li>
          </ul>
        </template>
      </category>
      <category title = '游戏'>
        <template v-slot:default="slotProps">     
          <ol>
            <li style="color: red;" v-for="(game,index) in slotProps.games" :key = 'index'>{{ game }}</li>
          </ol>
        </template>
      </category>
      <category title = '游戏'>
        <!-- 支持对象解构赋值 -->
        <template v-slot:default="{games}">     
            <h4 v-for="(game,index) in games" :key = 'index'>{{ game }}</h4>
        </template>
      </category>
    </div>
  </div>
</template>
<script>
import Category from './components/Category.vue';
    export default {
        name: 'App',
        data(){
          return {

          }
        },
        components:{
          Category
        },
    }
</script>
<style scoped>
  .container{
      display: flex;
      justify-content: space-around;
  }
  img{
    width: 100%
  }
  video{
    width: 100%
  }
</style>
